<template>
	<view>
		<!--用户头像和昵称-->
		<view class="userInformation">
			<view class="userInfomation-avatar">
				<open-data type="userAvatarUrl"></open-data>
				<!-- <image class="touxiang" src="{{userInfo.avatarUrl}}"></image> -->
			</view>
			<view class="userInformation-nickname">
				<open-data type="userNickName"></open-data>
			</view>
			<!-- <view><text></text></view> -->
		</view>
		<!--间隔灰横条-->
		<view class="graydivide"></view>
		<!--支付-->
		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/wxpay.png"></image>
					</view>
					<view class="text" bindtap="pay">支付</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/rightGo.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔灰横条-->
		<view class="graydivide"></view>

		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/car.png"></image>
					</view>
					<view class="text">我的驾校</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/rightGo.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔白横线-->
		<view class="whitedivide"></view>

		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/teacher.png"></image>
					</view>
					<view class="text">我的教练</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/rightGo.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔白横线-->
		<view class="whitedivide"></view>

		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/QrCode.png"></image>
					</view>
					<view class="text">二维码名片</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/rightGo.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔白横线-->
		<view class="whitedivide"></view>

		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/1.png"></image>
					</view>
					<view class="text">暂定</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/rightGo.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.userInformation {
		/*头像&微信名称*/
		display: flex;
		background-color: #ffffff;
	}

	.userInfomation-avatar {
		/*头像*/
		background-color: #ffffff;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		overflow: hidden;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		margin-top: 30rpx;
		margin-left: 40rpx;
		border-color: #ffffff;
	}

	.userInformation-nickname {
		/*昵称*/
		color: #000000;
		font-size: 22px;
		font-weight: bold;
		width: 320rpx;
		height: 120px;
		line-height: 120px;
	}

	.whitedivide {
		/*白色分割线*/
		height: 1px;
		background-color: #ffffff;
		width: 56px;
		position: relative;
		top: 0px;
	}

	.graydivide {
		/*灰色分割条*/
		height: 10px;
		background-color: #ededed;
		position: relative;
		top: 0px;
	}

	.function {
		width: 100%;
		background-color: #ffffff;
		margin-top: 0rpx;
		overflow: hidden;
		display: flex;
		/**/
	}

	.functioninformation {
		/*左边动作图标&文字说明*/
		display: flex;
	}

	.left-icon {
		display: flex;
		margin: 14px;
	}

	.icon-picture {
		/*图标*/
		display: flex;
		width: 28px;
		height: 28px;
	}

	.text {
		/*文字*/
		font-size: 14px;
		font-style: normal;
		font-weight: normal;
		width: 70px;
		position: relative;
		left: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: gray;
	}

	.right-icon {
		/*右边图片*/
		display: flex;
		margin: 14px;
		position: absolute;
		right: 14px;
	}
</style>
